<!--
    视频图片预览样式1.
    默认呈半遮罩状态，当鼠标移动到图片区域的时候，遮罩窗体上移，显示出全部信息
    实现原理，先创建2个div块，长度170，宽度96，把4个角改为弧形。
    然后把2个div叠加到一起，设置z-index，外面的div设置为半透明。
    然后使用下面的动画属性以及:hover选择器来实现这个效果
    transition:opacity 0.2s;
-->

<template>
    <div @click="showVideo" class="out-module" v-bind:style='{"background-image":"url("+videoInfo.img220x125+")"}' >
        <div class="inner-module">
            <div class="inner-module-div1">
                {{videoTitle}}
            </div>

            <div class="inner-module-div2" style="margin-top:10px;">
                UP主:{{videoInfo.nickName}}
            </div>

            <div class="inner-module-div2" >
                播放量:{{videoInfo.bofang}}
            </div>

        </div>
    </div>
</template>

<script>
    export default {
        name: 'showHoverMaskWithCharacters',
        props:{
            videoInfo:{
                type:Object
            }
        },
        data () {
            return {
                videoTitle:''
            }
        },
        methods:{
            showVideo(){
                var self = this;
                var localStorage = window.localStorage;
                localStorage.setItem("videoInfo",JSON.stringify(this.videoInfo));
                this.$router.push('/chamVideo');
                var formData = new FormData();
                formData.append("videoId",this.videoInfo.videoId);
                self.$api.post('video-service/videoController/addBofangCount',formData,result=>{
                });
            }
        },
        mounted(){
            var videoTitle = this.videoInfo.videoTitle;
            if(videoTitle.length>23){
                videoTitle = videoTitle.substring(0,23)+"...";
            }
            this.videoTitle=videoTitle;
        }
    }
</script>

<style scoped>

    .out-module{
        width:170px;
        height:96px;
        /*background-image: url("../assets/sdzzsz.png");*/
        background-repeat:no-repeat;
        background-size:100% 100%;
        border-radius:2px;
        z-index:1;
        overflow:hidden;
        float:left;
    }

    .inner-module{
        width:170px;
        height:96px;

        /**
            使用渐变透明色，上下两个渐变色均设置为黑色，透明系数均设置为0.4
         */
        background-image:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4));
        border-radius:2px;
        z-index:2;
        display: inline-block;
        margin-top:76px;
        transition:opacity 0.2s;
        -moz-transition:opacity 0.2s; /* Firefox 4 */
        -webkit-transition:opacity 0.2s; /* Safari and Chrome */
        -o-transition:opacity 0.2s; /* Opera */
    }

    /**
        当父元素hover的时候，修改子元素的样式
     */

    .out-module:hover .inner-module{
        cursor:pointer;
        margin-top:0px;
    }

    .inner-module-div1{
        width:100%;
        height:40px;
        padding-left:2px;
        line-height:20px;
    }

    .inner-module-div2{
        width:100%;
        height:20px;
        padding-left:2px;
        line-height:20px;
    }



</style>
